import { defineStore } from 'pinia'
import { ref } from 'vue'

export interface LayoutSettings {
  // 侧边栏
  sidebarOpened: boolean
  withoutAnimation: boolean
  
  // 主题
  theme: 'light' | 'dark'
  primaryColor: string
  
  // 布局
  layout: 'vertical' | 'horizontal' | 'mix'
  fixedHeader: boolean
  showLogo: boolean
  showBreadcrumb: boolean
  showTagsView: boolean
  showFooter: boolean
  
  // 页面
  pageLoading: boolean
  
  // 其他
  showSettings: boolean
  size: 'large' | 'default' | 'small'
}

export const useSettingsStore = defineStore(
  'settings',
  () => {
    // 默认设置
    const defaultSettings: LayoutSettings = {
      sidebarOpened: true,
      withoutAnimation: false,
      theme: 'light',
      primaryColor: '#409eff',
      layout: 'vertical',
      fixedHeader: true,
      showLogo: true,
      showBreadcrumb: true,
      showTagsView: true,
      showFooter: true,
      pageLoading: false,
      showSettings: false,
      size: 'default',
    }

    // 当前设置
    const settings = ref<LayoutSettings>({ ...defaultSettings })

    // 切换侧边栏
    const toggleSidebar = (withoutAnimation = false) => {
      settings.value.sidebarOpened = !settings.value.sidebarOpened
      settings.value.withoutAnimation = withoutAnimation
    }

    // 关闭侧边栏
    const closeSidebar = (withoutAnimation = false) => {
      settings.value.sidebarOpened = false
      settings.value.withoutAnimation = withoutAnimation
    }

    // 打开侧边栏
    const openSidebar = (withoutAnimation = false) => {
      settings.value.sidebarOpened = true
      settings.value.withoutAnimation = withoutAnimation
    }

    // 切换主题
    const toggleTheme = () => {
      settings.value.theme = settings.value.theme === 'light' ? 'dark' : 'light'
      applyTheme()
    }

    // 设置主题
    const setTheme = (theme: 'light' | 'dark') => {
      settings.value.theme = theme
      applyTheme()
    }

    // 应用主题
    const applyTheme = () => {
      const html = document.documentElement
      if (settings.value.theme === 'dark') {
        html.classList.add('dark')
      } else {
        html.classList.remove('dark')
      }
    }

    // 设置主色调
    const setPrimaryColor = (color: string) => {
      settings.value.primaryColor = color
      applyPrimaryColor()
    }

    // 应用主色调
    const applyPrimaryColor = () => {
      const root = document.documentElement
      root.style.setProperty('--kexilo-primary', settings.value.primaryColor)
      root.style.setProperty('--el-color-primary', settings.value.primaryColor)
    }

    // 设置布局
    const setLayout = (layout: 'vertical' | 'horizontal' | 'mix') => {
      settings.value.layout = layout
    }

    // 切换固定头部
    const toggleFixedHeader = () => {
      settings.value.fixedHeader = !settings.value.fixedHeader
    }

    // 切换显示Logo
    const toggleShowLogo = () => {
      settings.value.showLogo = !settings.value.showLogo
    }

    // 切换显示面包屑
    const toggleShowBreadcrumb = () => {
      settings.value.showBreadcrumb = !settings.value.showBreadcrumb
    }

    // 切换显示标签页
    const toggleShowTagsView = () => {
      settings.value.showTagsView = !settings.value.showTagsView
    }

    // 切换显示底部
    const toggleShowFooter = () => {
      settings.value.showFooter = !settings.value.showFooter
    }

    // 设置页面加载状态
    const setPageLoading = (loading: boolean) => {
      settings.value.pageLoading = loading
    }

    // 切换设置面板
    const toggleShowSettings = () => {
      settings.value.showSettings = !settings.value.showSettings
    }

    // 设置组件大小
    const setSize = (size: 'large' | 'default' | 'small') => {
      settings.value.size = size
    }

    // 重置设置
    const resetSettings = () => {
      Object.assign(settings.value, defaultSettings)
      applyTheme()
      applyPrimaryColor()
    }

    // 更新设置
    const updateSettings = (newSettings: Partial<LayoutSettings>) => {
      Object.assign(settings.value, newSettings)
      
      // 如果更新了主题或主色调，需要应用
      if (newSettings.theme !== undefined) {
        applyTheme()
      }
      if (newSettings.primaryColor !== undefined) {
        applyPrimaryColor()
      }
    }

    // 初始化设置
    const initSettings = () => {
      applyTheme()
      applyPrimaryColor()
    }

    return {
      settings,
      toggleSidebar,
      closeSidebar,
      openSidebar,
      toggleTheme,
      setTheme,
      setPrimaryColor,
      setLayout,
      toggleFixedHeader,
      toggleShowLogo,
      toggleShowBreadcrumb,
      toggleShowTagsView,
      toggleShowFooter,
      setPageLoading,
      toggleShowSettings,
      setSize,
      resetSettings,
      updateSettings,
      initSettings,
    }
  },
  {
    persist: {
      key: 'kexilo-settings',
      storage: localStorage,
      paths: ['settings'],
    },
  }
)
